<!--
 * @Author: your name
 * @Date: 2021-11-29 15:41:47
 * @LastEditTime: 2021-12-02 13:50:58
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \li-yuwei\client\src\components\HintCom.vue
-->
<template>
  <el-card class="hint-box" body-style="padding:0">
    <div slot="header" class="clearfix" style="border: none">
      <p>
        {{ about }} <span> {{ text }}</span> {{ title }}
      </p>
      <div>
        {{ prefix }} <span> {{ num }} </span> {{ piece }}
      </div>
    </div>
    <!-- slot插槽 -->
    <slot name="body"></slot>
  </el-card>
</template>

<script>
export default {
  props: {
    text: {
      type: String,
      require: true,
    },
    num: {
      type: Number,
      require: true,
      default: 0,
    },
    title: {
      type: String,
      require: false,
      default: "标签有关的文章",
    },
    prefix: {
      type: String,
      require: false,
      default: "共搜索到",
    },
    piece: {
      type: String,
      require: false,
      default: "篇",
    },
    about: {
      type: String,
      require: false,
      default: null,
    },
  },
};
</script>

<style scoped lang="scss">
@import "@/assets/scss/common/common.scss";

.hint-box {
  text-align: center;
  @include background_color("card_background");
  @include font_color("text-color");
  border: none;
  p > span {
    font-size: 24px;
    color: #ff0064;
  }
  div > span {
    font-size: 18px;
    color: #ff0064;
  }
}
.el-card__header {
}
</style>
